<template>
    <div class="baseData">
        <div class="user_info">
            <span>用户名称&nbsp;&nbsp;：</span>
            <span>{{ username }}</span>
        </div>
        <div class="user_info">
            <span>用&nbsp;户&nbsp;ID&nbsp;&nbsp;&nbsp;：</span>
            <span>{{ uid }}</span>
        </div>
        <div class="user_info">
            <span>用户角色&nbsp;&nbsp;：</span>
            <span>{{role=="user" ?"普通用户":(role=="admin"?"管理员":"超级管理员")}}</span>
        </div>
    </div>
  </template>
  
  <script>
  import { mapState } from 'vuex';
  export default {
   computed:{
          ...mapState('login',['username','uid','role']),
      },
      data(){
        return {

        }
      }
  }
  </script>
  
  <style scoped>
  .baseData{
    height: 70vh;
    width:90%;
    background: #F7F8F8;
    margin: 0px auto ;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    padding-left:50px;
    padding-top: 50px;
  }
 .user_info{
  line-height: 70px;
  font-size: 16px;
  color:#28342e;

}
  </style>